<!DOCTYPE html>
<html>
<head>
    <title>Ceadeal 后台管理系统 | 登录</title>
    <#include "common/head.ftl"/>
    <!-- iCheck -->
    <link rel="stylesheet" href="/plugin/AdminLTE/plugins/iCheck/flat/blue.css">
    <!-- Animate CSS -->
    <link rel="stylesheet" href="/css/animate.css">
    <style type="text/css">
        .login-body {
            background: #65cea7 url("/image/bg-login.jpg") no-repeat fixed;
            background-size: cover;
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body class="login-body hold-transition login-page">

<form id="loginForm" action="/auth" method="post">
    <div class="login-box">
        <div id="login-logo" class="login-logo">
            <a href="login.ftl">
                <span><b>C</b>EA<b>D</b>EA<b>L</b></span>
            </a>
        </div>
        <!-- /.login-logo -->
        <div id="login-box-body" class="login-box-body">
            <p class="login-box-msg" id="error"></p>
            <div class="form-group has-feedback">
                <input type="text" autocomplete="off" id="username" name="username" class="form-control" placeholder="用户名" maxlength="20">
                <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <input type="password" id="password" name="password" class="form-control" placeholder="密码"
                       maxlength="20" autocomplete="off">
                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback" style="width:60%; float: left">
                <input type="text" id="captcha" name="captcha" class="form-control" style="text-transform:uppercase;"
                       for="btn_login" placeholder="验证码" maxlength="4" autocomplete="off">
                <span class="glyphicon glyphicon-flag form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback" style="width:40%; float: left" align="right">
                <img id="captchaImage" class="captchaImage" height="34px;" src="/captcha/image"
                     onclick="this.src='/captcha/image?'+Math.random()" title="点击更换验证码"/>
            </div>
            <div class="row">
            <#--<div class="col-xs-8">-->
            <#--<div class="checkbox icheck">-->
            <#--<label>-->
            <#--<input type="checkbox"> 记住我-->
            <#--</label>-->
            <#--</div>-->
            <#--</div>-->
                <!-- /.col -->
                <div class="col-xs-12">
                    <button type="button" id="btn_login" class="btn btn-primary btn-block btn-flat" onclick="checkUserForm()">登&nbsp;录</button>
                </div>
                <!-- /.col -->
            </div>
            <p style="margin:0px; padding:0px;">&nbsp;</p>
            <p class="login-box-msg" style="margin:0px; padding:0px; font-size:12px;">COPYRIGHT © 2016-2026 CEADEAL.COM ALL RIGHTS RESERVED.</p>
        </div>
        <!-- /.login-box-body -->
    </div>
    <!-- /.login-box -->
</form>
<!-- ./wrapper -->

<!-- REQUIRED JS SCRIPTS -->
<#include "common/script-common.ftl"/>
<#if error??>
<script>
    $(function(){
        toastr.error("${error? default("")}", "提示信息");
    });
</script>
</#if>
<script>
    $(function () {
        startAnimation($("#login-logo"), "fadeInDown");
        startAnimation($("#login-box-body"), "fadeInUp");

        $("#username").focus();

        // 注册键盘事件
        document.onkeydown = function (e) {
            //捕捉回车事件
            var ev = (typeof event != 'undefined') ? window.event : e;
            if (ev.keyCode == 13) {
                checkUserForm();
            }
        }
    });

    // 检查表单
    function checkUserForm() {
        var userName = $("#username").val();
        var userPassword = $("#password").val();
        var captcha = $("#captcha").val();

        var flag = true;

        if ($.trim(userName) == "") {
            toastr.warning("请输入用户名", "提示信息");
            flag = false;
        }
        if ($.trim(userPassword) == "") {
            toastr.warning("请输入密码", "提示信息");
            flag = false;
        }
        if ($.trim(captcha) == "") {
            toastr.warning("请输入验证码", "提示信息");
            flag = false;
        }

        if (flag) {
            $('#loginForm').submit();
        }
    }
</script>
</body>
</html>
